<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
	pageContext.setAttribute("basePath",basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>富文本编辑器</title>

		<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css" />
		<link rel="stylesheet" href="<%=basePath %>layui/css/modules/layer/default/layer.css" />
		<script src="<%=basePath %>layui/layui.js"></script>
		<script src="<%=basePath %>layui/lay/modules/layer.js"></script>
		<script type="text/javascript" src="${basePath }static/wangEditor/wangEditor.min.js"></script>
		<script type="text/javascript" src="${basePath }static/js/jquery-3.3.1.min.js"></script>
		<style type="text/css">
	        .toolbar {
	            border: 1px solid #ccc;
	        }
	        .text {
	            border: 1px solid #ccc;
	            height: 400px;
	        }
	    </style>
	</head>
	<body>
		<input type="hidden" id="indexMsg" value="${msg }"/>
		<div id="div1" class="toolbar"></div>
	    <div style="padding: 5px 0; color: #ccc"></div>
	    <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
	        <p>请输入内容</p>
	    </div>
	    <div style="width: 500px; padding: 15px 0px 0px 15px">
			<div class="layui-form-item">
			   <label class="layui-form-label">公告标题：</label>
			   <div class="layui-input-block">
			     <input id="acticlename" class="layui-input" type="text"/>
			   </div>
			</div>
	    	<button style="margin-left: 400px;"  class="layui-btn" onclick="getEditorData()">提交数据</button>
	    </div>
		<script type="text/javascript">
			var E = window.wangEditor;
	        var editor = new E('#div1', '#div2'); // 两个参数也可以传入 elem 对象，class 选择器
	        editor.customConfig.fontNames = [
	            '宋体',
	            '微软雅黑',
	            'Arial',
	            'Tahoma',
	            'Verdana'
	        ];
	        editor.customConfig.uploadImgMaxSize = 10* 1024 * 1024;
	        editor.customConfig.uploadImgMaxLength =20;
			editor.customConfig.uploadImgServer = '${pageContext.request.contextPath }/noticeImgUpload';
			editor.customConfig.uploadFileName = 'myFileName';
			editor.create();
			
			function showImg(obj) {
			    var file=$(obj)[0].files[0];    //获取文件信息
			    var imgdata='';
			    if(file)
			    {
			        var reader=new FileReader();  //调用FileReader
			        reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
			        reader.onload=function(evt){   //读取操作完成时触发。
			            $("#img").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
			        };
			        
			    }else{
			        alert("上传失败");
			    }
			}
			
			function getEditorData(){
				var noticeTitle = $.trim($('#acticlename').val());
				var value = editor.txt.html();
				
			    var formData = new FormData();

			    formData.append("noticeTitle", noticeTitle);
			    formData.append("value", value);

			    $.ajax({
			        url:'${basePath }addNotice',
			        dataType:'json',
			        type:'POST',
			        async: false,
			        data: formData,
			        processData : false, // 使数据不做处理
			        contentType : false, // 不要设置Content-Type请求头
			        success: function(data){
			            if(data==1){
			            	alert("添加成功！！");
			            	location.reload();
			            }else if(data==0){
			            	alert("上传失败，请重试！！");
			            }else if(data==2){
			            	alert("没有填写文章名称，请刷新后重新填写！！")
			            }else if(data==3){
			            	alert("您还没有登录，请登录后访问！！")
			            	location.reload();
			            }else if(data==4){
			            	alert("您不是管理员，没有操作权限！！")
			            	location.reload();
			            }
			        }
			    });
				
			}
		</script>
	</body>
</html>